<template>
    <!-- 案例展示 -->
    <div class="boxs margin_top" :class="!ismobile ? 'toppc' : 'bigmobe'">
        <headers :pageindex="1"></headers>
        <hengscroll :swiperlist="listanli"></hengscroll>
        <div :class="!ismobile ? 'width1300 bigpc' : ''">
            <titleline :miantitle="'Service case'" :explaintitle="'服务案例'"></titleline>
            <div class="content" :class="!ismobile ? 'pcecontent' : 'mobe'" v-if="navlist.length > 0">
                <div v-for="(item, index) in navlist[0].children" @click="clickitem(item)">
                    <div :style="activesid == item.key ? 'color:#009aff' : ''" class="shouzhi">{{ item.value }}</div>
                    <span>
                        <a class="iconfont icon-a-ziyuan1" v-for="(items, index) in 14"
                            :class="index <= Math.floor(item.num / 10) ? 'liang' : ''">
                        </a>
                    </span>
                </div>
            </div>
            <ul>
                <li v-for="(item, index) in list" @click="godetailanli(item)">
                    <div class="imgbox">
                        <img :src="item.logo" alt="">
                    </div>
                    <div>
                        <div>{{ item.name }}</div>
                        <div>
                            <span class="iconfont icon-zhengyan"></span>
                            <span class="ci">{{ item.view_count }}次</span>
                        </div>
                    </div>
                </li>
            </ul>
            <div style="margin-top: 10px;">
                <el-pagination background layout="prev, pager, next" :total="TotalCount" :page-size="12"
                    :current-page="page_index" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
            <titleline :miantitle="'Company consulting'" :explaintitle="'公司资讯'"></titleline>
            <ul style="padding-top: 0px;">
                <li v-for="(item, index) in zixunlist" @click="godetailzixun(index)">
                    <div class="imgbox">
                        <img :src="item.logo" alt="">
                    </div>
                    <div>
                        <div class="chaoguo">{{ item.name }}</div>
                        <div>
                            <span class="iconfont icon-zhengyan"></span>
                            <span class="ci">{{ item.view_count }}次</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <bottoms></bottoms>
    </div>
</template>

<script>


import bottoms from "./modle/bottoms.vue"
import headers from "./modle/headers.vue"
import hengscroll from "./modle/hengscroll.vue"
import titleline from "./modle/titleline.vue"

export default {
    name: 'HelloWorld',
    components: {
        headers,
        bottoms,
        titleline,
        hengscroll
    },
    data() {
        return {
            listanli: [],
            TotalCount: 0,
            activesid: null,
            navlist: [],
            zixunlist: [],
            swiperlist: [
                {
                    img: require('../assets/images/8-514-639.jpg')
                },
                {
                    img: require('../assets/images/8-514-639.jpg')
                }, {
                    img: require('../assets/images/8-514-639.jpg')
                }, {
                    img: require('../assets/images/8-514-639.jpg')
                },
                {
                    img: require('../assets/images/8-514-639.jpg')
                }, {
                    img: require('../assets/images/8-514-639.jpg')
                }, {
                    img: require('../assets/images/8-514-639.jpg')
                },
                {
                    img: require('../assets/images/8-514-639.jpg')
                },
                {
                    img: require('../assets/images/8-514-639.jpg')
                }],
            ismobile: "",
            list: [],
            page_index: 1,
            pag_esize: 12
        }
    },
    created() {
        this.$api.get(
            "/api/PortalHome/get_all_tool",
            {
                page_index: 1,
                page_size: 18
            },
            (r) => {
                this.listanli = JSON.parse(JSON.stringify(r.DATA)).splice(0, 9)
            },
            (f) => { }
        );
        this.get_zixun()
        //获取案例按钮
        this.getanli()
        // 获取全部案例
        this.getalltool()
        // this.$api.get(
        //     "/api/PortalHome/get_tool",
        //     {},
        //     (r) => {
        //         this.list = r.DATA
        //         let randomNums = []
        //         this.TotalCount = r.TotalCount
        //     },
        //     (f) => { }
        // );
    },
    filters: {
        getnum(cases) {
            // 使用 Math.floor 来计算满十个案例有几颗星 
            return Math.floor(cases / 10);
        },
    },
    methods: {
        handleCurrentChange(val) {
            this.page_index = val
            if (this.activesid != null) {
                this.getanlilist()
            } else {
                this.getalltool()
            }

        },
        clickitem(item) {
            if (this.activesid == item.key) {
                //取消选择
                this.page_index = 1
                this.activesid = null
                this.getalltool()
                return
            }
            this.activesid = item.key
            this.page_index = 1
            this.getanlilist()
        },
        getanlilist() {
            this.$api.get(
                "/api/PortalHome/get_tool",
                { categories_id: this.activesid ? this.activesid : this.activesid, page_index: this.page_index, page_size: this.pag_esize },
                (r) => {
                    this.list = r.DATA
                    this.TotalCount = r.TotalCount
                },
                (f) => { }
            );
        },
        getalltool() {
            this.$api.get(
                "/api/PortalHome/get_all_tool",
                {
                    page_index: this.page_index,
                    page_size: 12
                },
                (r) => {
                    this.list = r.DATA
                    this.TotalCount = r.TotalCount
                },
                (f) => { }
            );
        },
        getanli() {
            this.$api.get(
                "/api/PortalHome/get_tool_categories",
                { category_type: 2 },
                (r) => {
                    this.navlist = r.DATA
                    // this.getanlilist()
                },
                (f) => { }
            );
        },
        // 获取公司资讯
        get_zixun() {
            this.$api.get(
                "/api/PortalHome/get_notice",
                {
                    notice_type: 1
                },
                (r) => {
                    this.zixunlist = r.DATA
                },
                (f) => { }
            );
        },
        godetailanli(item) {
            this.$router.push({
                path: '/anli_detail',
                query: {
                    id: item.id
                }
            })
        },
        godetailzixun(index) {
            this.$router.push({
                path: '/zixun_detail',
                query: {
                    id: this.zixunlist[index].id
                }
            })
        },
    },
    mounted() {
        this.ismobile = this.isMobile()
        let that = this;
        window.addEventListener('resize', function () {
            that.ismobile = that.isMobile()
        });

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.liang {
    color: #009aff;
}

.boxs {
    width: 100%;
    overflow: hidden;
}

.chaoguo {
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

ul {
    padding: 0.9rem 1rem;
    margin: 0 auto;
    overflow: hidden;

    li {
        margin: 0 auto;
        list-style: none;
        width: 49%;
        float: left;
        box-shadow: 0rem 0rem 0.2rem rgba(0, 0, 0, 0.2);
        border-radius: 0.6rem;
        margin-top: 0.6rem;
        padding-bottom: 0.7rem;

        >div:nth-child(1) {
            width: 100%;
            height: 10rem;
            overflow: hidden;
        }

        img {
            max-width: 100%;
            min-height: 10rem;
            display: block;
            border-radius: 0.6rem;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }

        >div:nth-child(2) {
            padding: 0 0.5rem;

            >div:nth-child(1) {
                font-size: 0.8rem;
                line-height: 1.7rem;
            }

            >div:nth-child(2) {
                text-align: right;

                >span:nth-child(2) {
                    font-size: 0.9rem;
                }
            }
        }
    }

    li:nth-child(odd) {
        float: left;
    }

    li:nth-child(even) {
        float: right;
    }
}

.content {
    width: 100%;
    overflow: hidden;
    padding-left: 1.5rem;
    margin-bottom: 1.3rem;

    >div {
        width: 100%;
        float: left;
        font-size: 0.8rem;
        color: #2c2c2c;
        margin: 0.3rem 0;

        >div {
            width: 4rem;
            float: left;
        }

        span {
            margin-left: 0.5rem;
            color: #b7b7b7;
            display: block;
            float: left;

            a {
                margin-right: 0.6rem;
                display: block;
                float: left;
                line-height: 1.5rem;
            }
        }
    }
}

.pce {
    margin-top: 6rem;
}

@keyframes lp-scrolling {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-2700px)
    }
}

.pcecontent {
    width: 100%;
    overflow: hidden;


    padding-left: 0rem;

    >div {
        width: 47%;
        float: left;
        font-size: 1.1rem;
        color: #2c2c2c;
        margin: 0.3rem 0;

        >div {
            width: 5.8rem;
            float: left;
        }

        span {
            margin-left: 0.5rem;
            color: #b7b7b7;
            display: block;
            float: left;
            width: 23rem;
        }
    }

    >div:nth-child(even) {
        float: right;
    }
}

.ispcbigs {
    .anli {
        display: inline-flex;
        gap: var(--lp-pad-3);
        will-change: transform;
        animation: lp-scrolling 60s linear infinite;

        .anli_list {
            min-width: 10rem;
            max-width: 609px;
            width: 30rem;
            float: none;

            img {
                width: 100%;
                // width: 343px;
            }
        }
    }

    .anli:hover {
        animation-play-state: paused
    }
}

.bigpc {
    ul {
        padding: 0rem;
        margin: 0 auto;
        overflow: hidden;

        li {
            margin: 0 auto;
            list-style: none;
            width: 23%;
            float: left;
            box-shadow: none;
            position: relative;
            border-radius: 0.6rem;
            margin-top: 0.6rem;
            padding-bottom: 0.7rem;
            margin-right: 0.9rem;

            >div:nth-child(1) {
                width: 100%;
                height: 13rem;
            }

            img {
                // width: 100%;
                min-width: 100%;
                min-height: 13rem;
                display: block;
                border-radius: 0.6rem;
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 0px;
            }

            .imgbox {

                overflow: hidden;
                border-radius: 0.6rem;
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 0px;
                width: 100%;
                height: 247px;
            }

            img {
                display: block;
                width: 100%;
                transition: all 0.5s;
                transform: scale(1);
            }

            img:hover {
                transition: all 0.5s;
                transform: scale(1.1);
            }

            >div:nth-child(2) {
                padding: 0 0.5rem;
                overflow: hidden;
                margin-top: 0.6rem;

                >div:nth-child(1) {
                    font-size: 1rem;
                    line-height: 1.7rem;
                    float: left;
                    font-weight: bold;
                }

                >div:nth-child(2) {
                    text-align: right;
                    float: right;
                    line-height: 1.5rem;
                    position: absolute;
                    top: 183px;
                    right: 0px;
                    background: rgba(0, 0, 0, 0.3);
                    padding: 0 5px;
                    color: white;


                    >span:nth-child(2) {
                        font-size: 0.9rem;
                    }
                }
            }
        }

        li:nth-child(odd) {
            float: left;
        }

        li:nth-child(even) {
            float: left;
        }
    }
}

.bigmobe {
    width: 100%;
    overflow: hidden;

    .ispcbigs .anli .anli_list {
        width: 3rem !important;
    }
}

.toppc {
    margin-top: 3rem;
}

.mobe {
    >div {
        div {
            margin-top: 0.8rem;
        }
    }

    span {
        width: 18rem !important;

        a {
            margin-right: 0.6rem;
            display: block;
            float: left;
            line-height: 1.5rem;
        }
    }
}
</style>
